<template>
	<view class="tabbar">
		<view class="tab_lists">
			<view class="tab_list" v-for="(item, index) in data" :key="index" @click="tabbar(index)">
				<image class="tab_list_bg" :src="item.bgImage" mode="aspectFit"></image>
				<div class="box">
					<span class="icon"><img :src="item.icons" alt="" /></span>
					<span class="text">{{ item.name }}</span>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		playSound
	} from '../../utils/soundSettings'
	export default {
		data() {
			return {
				data: [{
						bgImage: "https://img.jingkakeji.com/img/static/shouyes.png",
						icons: "https://img.jingkakeji.com/img/static/homes.png",
						name: "首页"
					},
					{
						bgImage: "https://img.jingkakeji.com/img/static/fxd.png",
						icons: "https://img.jingkakeji.com/img/static/caole.png",
						name: "分享"
					},
					{
						bgImage: "https://img.jingkakeji.com/img/static/baos.png",
						icons: "https://img.jingkakeji.com/img/static/shoutibao.png",
						name: "背包"
					},
					{
						bgImage: "https://img.jingkakeji.com/img/static/huoche.png",
						icons: "https://img.jingkakeji.com/img/static/yonghusd.png",
						name: "我的"
					}
				]
			}
		},
		methods: {
			tabbar(index) {
				console.log('123');
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3")
				if (index == 0) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (index == 1) {
					uni.switchTab({
						url: "/pages/fenxiang/fenxiang"
					})
				} else if (index == 2) {
					uni.switchTab({
						url: "/pages/beibao/beibao"
					})
				} else if (index == 3) {
					uni.switchTab({
						url: "/pages/my/my"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.tabbar {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #7869DA;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		z-index: 1;
	}

	.tab_lists {
		width: 90%;
		height: 70rpx;
		display: flex;
	}

	.tab_list {
		width: 25%;
		height: 100%;
		position: relative;
		background-repeat: no-repeat;
		background-size: contain;

		.tab_list_bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}
	}

	.box {
		display: flex;
		/* 启用 Flex 布局 */
		align-items: center;
		/* 垂直居中 */
		gap: 4px;
		/* 图标和文字的间距 */
		padding: 4px 14px;
		/* 内边距（可选） */
		position: relative;
		z-index: 1;
	}

	.icon {
		font-size: 20px;
		/* 调整图标大小 */
	}

	.text {
		font-size: 14px;
		/* 调整文字大小 */
		color: #ffffff;
	}
</style>